<template>
  <div class="pro_item" @click="goDetail(id)">
    <div class="img">
      <img v-lazy="image" alt="">
    </div>
    <div class="info">
      <div class="des">{{store_name}}</div>
      <div class="pro">促销价格:￥{{ot_price}}</div>
      <div class="tp">
        <div class="tt">日常价{{price}}</div>
        <div class="pp">仅剩{{stock}}件</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    id:{
      type:Number
    },
    cate_id:{
      type:String
    },
    image:{
      type:String
    },
    price:{
      type:String
    },
    ot_price:{
      type:String
    },
    stock:{
      type:Number
    },
    store_name:{
      type:String
    }
  },
  methods:{
    goDetail(id) {
      this.$router.push("/detail/" + id);
    },
  }


};
</script>

<style lang="scss" scoped>
.pro_item {
  height: 94px;
  display: flex;
  justify-content: space-between;
  .img {
    width: 94px;
    height: 94px;
    border-radius:8px;
    overflow: hidden;
    > img {
      width: 100%;
      height: 100%;
    }
  }
  .info {
    width: 236px;
    height: 100%;
    .des {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%;
      font-size: 15px;
      color: #333;
    }
    .pro {
      margin: 17px 0 15px;
      background-image: linear-gradient(90deg, #ff6248 0, #ff3e1e);
      width: 130px;
      height: 23px;
      color: #ffff;
      font-size: 12px;
      text-align: center;
      line-height: 23px;
      border-top-left-radius: 11px;
      border-bottom-right-radius: 11px;
    }
    .tp{
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: #999;
        .tt{
            text-decoration:line-through;
        }
        .pp{
            text-align: right;
        }
    }
  }
}
</style>

